/*
 * @Description: 添加代码弹窗组件
 * @Author: Rfan
 * @Date: 2022-01-07 14:54:11
 * @LastEditTime: 2022-02-15 15:59:15
 */

import { Button, Form, Input, Modal, Radio, Space } from 'antd';
import type { ValidateErrorEntity } from 'rc-field-form/lib/interface';
import { useCodeDefContext } from '../contexts/CodeDefContext';

const AddCodeDialog = () => {
  const { loading } = useCodeDefContext();
  const [form] = Form.useForm();

  const submitFunc = () => {
    console.log('submit', form);
    form.submit();
  };

  const onFinish = (val: any) => {
    console.log('form finish', val);
  };

  const onFinishFailed = (errorInfo: ValidateErrorEntity) => {
    console.log('Failed:', errorInfo);
  };

  const onCancel = () => {};

  return (
    <Modal
      destroyOnClose
      title="新增代码定义"
      visible={loading}
      onCancel={onCancel}
      footer={[
        <Button key="back" onClick={onCancel}>
          取消
        </Button>,
        <Button key="submit" type="primary" onClick={submitFunc}>
          确定
        </Button>
      ]}
    >
      <Form
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 14 }}
        preserve={false}
        form={form}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item
          name="fondCode"
          label="显示名称"
          extra="代码显示名称，不能重复"
          rules={[{ required: true, message: '请填写代码显示名称' }]}
        >
          <Input placeholder="请填写代码显示名称" />
        </Form.Item>
        <Form.Item
          name="fondName"
          label="代码数值"
          extra="代码数值标识，不能重复，建议用数据和字母组成"
          rules={[{ required: true, message: '请填写代码数值编号' }]}
        >
          <Input placeholder="请填写代码数值" allowClear />
        </Form.Item>
        <Form.Item name="type" label="状态">
          <Radio.Group>
            <Space direction="vertical">
              <Radio value="1">有效（代码可以正常使用）</Radio>
              <Radio value="0">无效（代码将不能再选中，已经选中不影响）</Radio>
            </Space>
          </Radio.Group>
        </Form.Item>
        <Form.Item name="comment" label="描述">
          <Input.TextArea />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default AddCodeDialog;
